<template>
  <div class="flex w-full  flex-wrap gap-12 mt-5 mb-10">
    <CardComponent v-for="item in data"
                   :code="tranceCode(item.code)"
                   :name="item.cmpId"
                   :type-name="item.cmpType"
                   :default-show-text="item.defaultText"
                   :paramsInfo="item.params"
    />
  </div>
  <div class="w-full flex justify-center">
    <a-pagination :total="total" show-total/>
  </div>

</template>
<script setup>

import CardComponent from "../../../../components/CardComponent.vue";
import {onMounted, ref} from "vue";
import {_} from "../../../../http/index.js";

let total = ref(0)
let data = ref([])

onMounted(() => {
  init()
})

/**
 * 初始化
 */
function init() {
  data.value = []
  _.left_component.join(`/system`).get().then(res => {
    total.value = res.data.total
    res.data.data.forEach(item => {
      data.value.push({
        code: item.code,
        cmpType: item.cmpType,
        cmpId: item.cmpId,
        name: item.name,
        defaultText: item.defaultText,
        createTime: item.createTime,
        updateTime: item.updateTime,
        params: item.params
      })
    })
  })
}

/**
 * 转换code，4位数字一个空格
 * @param code
 * @returns {*}
 */
function tranceCode(code) {
  let arr = []
  for (let i = 0; i < code.length; i += 4) {
    arr.push(code.slice(i, i + 4))
  }
  return arr.join(' ')
}
</script>
<style>
.card {
  width: 300px;
  height: 190px;
  background: lightgrey;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.foreground {
  border-radius: 15px;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2.8px);
  -webkit-backdrop-filter: blur(2.8px);
  padding: 16px;
  color: white;
}

.credit-card-header {
  display: flex;
  justify-content: space-between;
}

.credit-card-chip-container {
  margin: 8px 0;
  height: 40px;
  width: 40px;
}

.chip {
  width: 100%;
  height: 100%;
}

.category, .bank {
  font-size: smaller;
}

.info-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.names {
  align-self: flex-end;
  font-size: smaller;
}

.serial {
  align-self: flex-end;
  letter-spacing: 2px;
  font-size: 15px;
  font-family: monospace;
}

.expire {
  margin-left: 3px;
  font-size: smaller;
}

</style>